<ng-container *transloco="let t; read: 'manage-media-settings'">
  <div class="container-fluid">
    <form [formGroup]="settingsForm" *ngIf="serverSettings !== undefined" class="mb-2">

      <div class="row g-0">
        <p>{{t('encode-as-description-part-1')}} <a href="https://caniuse.com/?search=webp" target="_blank" rel="noopener noreferrer">{{t('encode-as-description-part-2')}}</a>/<a href="https://caniuse.com/?search=avif" target="_blank" rel="noopener noreferrer">{{t('encode-as-description-part-3')}}</a>
          <br/><b>{{t('encode-as-warning')}}</b>
        </p>
        <div *ngIf="settingsForm.get('encodeMediaAs')?.dirty" class="alert alert-danger" role="alert">{{t('media-warning')}}</div>
        <div class="col-md-6 col-sm-12 mb-3  pe-1">
          <label for="settings-media-encodeMediaAs" class="form-label me-1">{{t('encode-as-label')}}</label>
          <i class="fa fa-info-circle" placement="right" [ngbTooltip]="encodeMediaAsTooltip" role="button" tabindex="0"></i>
          <ng-template #encodeMediaAsTooltip>{{t('encode-as-tooltip')}}</ng-template>
          <span class="visually-hidden" id="settings-media-encodeMediaAs-help"><ng-container [ngTemplateOutlet]="encodeMediaAsTooltip"></ng-container></span>
          <select class="form-select" aria-describedby="settings-media-encodeMediaAs-help" formControlName="encodeMediaAs" id="settings-media-encodeMediaAs">
            <option *ngFor="let format of EncodeFormats" [value]="format.value">{{format.title}}</option>
          </select>
        </div>

        <div class="col-md-6 col-sm-12 mb-3">
          <label for="settings-media-coverImageSize" class="form-label me-1">{{t('cover-image-size-label')}}</label>
          <i class="fa fa-info-circle" placement="right" [ngbTooltip]="coverImageSizeTooltip" role="button" tabindex="0"></i>
          <ng-template #coverImageSizeTooltip>{{t('cover-image-size-tooltip')}}</ng-template>
          <span class="visually-hidden" id="settings-media-coverImageSize-help"><ng-container [ngTemplateOutlet]="coverImageSizeTooltip"></ng-container></span>
          <select class="form-select" aria-describedby="settings-media-coverImageSize-help" formControlName="coverImageSize" id="settings-media-coverImageSize">
            <option *ngFor="let size of coverImageSizes" [value]="size.value">{{size.title}}</option>
          </select>
        </div>
      </div>

      <div class="row g-0">
        <div class="mb-3">
          <label for="settings-bookmarksdir" class="form-label">{{t('bookmark-dir-label')}}</label><i class="fa fa-info-circle ms-1" placement="right" [ngbTooltip]="bookmarksDirectoryTooltip" role="button" tabindex="0"></i>
          <ng-template #bookmarksDirectoryTooltip>{{t('bookmark-dir-tooltip')}}</ng-template>
          <span class="visually-hidden" id="settings-bookmarksdir-help"><ng-container [ngTemplateOutlet]="bookmarksDirectoryTooltip"></ng-container></span>
          <div class="input-group">
            <input readonly id="settings-bookmarksdir" aria-describedby="settings-bookmarksdir-help" class="form-control" formControlName="bookmarksDirectory" type="text" aria-describedby="change-bookmarks-dir">
            <button id="change-bookmarks-dir" class="btn btn-primary" (click)="openDirectoryChooser(settingsForm.get('bookmarksDirectory')?.value, 'bookmarksDirectory')">
              {{t('change')}}
            </button>
          </div>
        </div>
      </div>

      <div class="col-auto d-flex d-md-block justify-content-sm-center text-md-end">
        <button type="button" class="flex-fill btn btn-secondary me-2" (click)="resetToDefaults()">{{t('reset-to-default')}}</button>
        <button type="button" class="flex-fill btn btn-secondary me-2" (click)="resetForm()">{{t('reset')}}</button>
        <button type="submit" class="flex-fill btn btn-primary" (click)="saveSettings()" [disabled]="!settingsForm.dirty">{{t('save')}}</button>
      </div>
    </form>

    <div class="mt-3" ngbAccordion [destroyOnHide]="false">
      <div ngbAccordionItem>
        <h2 ngbAccordionHeader>
          <button ngbAccordionButton>
            {{t('media-issue-title')}} <span class="ms-1" *ngIf="alertCount > 0">({{alertCount}})</span>
          </button>
        </h2>
        <div ngbAccordionCollapse>
          <div ngbAccordionBody>
            <ng-template>
              <app-manage-alerts (alertCount)="alertCount = $event"></app-manage-alerts>
            </ng-template>
          </div>
        </div>
      </div>
    </div>

    <div class="mt-3" ngbAccordion [destroyOnHide]="false">
      <div ngbAccordionItem>
        <h2 ngbAccordionHeader>
          <button ngbAccordionButton>
            {{t('scrobble-issue-title')}} <span class="ms-1" *ngIf="scrobbleCount > 0">({{scrobbleCount}})</span>
          </button>
        </h2>
        <div ngbAccordionCollapse>
          <div ngbAccordionBody>
            <ng-template>
              <app-manage-scrobble-errors (scrobbleCount)="scrobbleCount = $event"></app-manage-scrobble-errors>
            </ng-template>
          </div>
        </div>
      </div>
    </div>


  </div>

</ng-container>
